<template>
	<div class="line-echart">
		<BaseEchart :options="options"></BaseEchart>
	</div>
</template>

<script setup lang="ts">
	import { defineProps, computed } from 'vue'
	import BaseEchart from '@/base-ui/echart'
	import { IDataType } from '../types'
	const props = defineProps<{
		xLabels: string[]
		yLabels: any[]
	}>()
	const options = computed(() => {
		return {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					label: {
						backgroundColor: '#6a7985'
					}
				}
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: props.xLabels
			},
			yAxis: {
				type: 'value'
			},
			grid: {
				left: '5%',
				right: '5%',
				bottom: '8%',
				containLabel: true
			},
			series: [
				{
					name: '分别销量',
					stack: '总量',
					data: props.yLabels,
					type: 'line',
					areaStyle: {}
				}
			]
		}
	})
</script>

<style lang="less" scoped>
</style>